<template>
	<van-row
		:class="{
			'app-control-form__group': true,
			[`app-control-form__group__${name}`]: true,
			'app-control-form__group--nocaption': !showCaption,
			[`anchor__${name}`]: enableAnchor,
			[slotClass ? slotClass : '']: true,
		}"
		:style="slotStyle"
	>
		<van-collapse
			v-model="showContent"
			class="app-control-form__group__collapse"
		>
			<van-collapse-item name="open" :disabled="titleBarCloseMode === 0">
				<AppRow v-if="showContent" :layoutOpts="layoutOpts">
					<slot></slot>
				</AppRow>
				<template #title v-if="showCaption">
					<span>{{ title }}</span>
				</template>
				<template #icon v-if="iconClass || imgPath">
					<AppIcon
						:iconClass="iconClass"
						:imgPath="imgPath"
						:fontIconClass="iconClass"
					></AppIcon>
				</template>
				<template #value v-if="uIActionGroup && uIActionGroup.details">
					<AppButton
						v-for="(item, index) in uIActionGroup.details"
						:key="index"
						v-show="item.visible"
						type="link"
						:disabled="item.disabled"
						@click.stop="handleGroupAction($event, item)"
					>
						<AppIconText
							:iconClass="item.showIcon && item.iconClass"
							:imgPath="item.showIcon && item.imgPath"
							:text="item.showCaption && item.caption"
						/>
					</AppButton>
				</template>
				<template #right-icon>
					<van-icon
						v-if="titleBarCloseMode != 0"
						class="van-cell__right-icon"
						name="arrow"
						@click.self="null"
					/>
				</template>
			</van-collapse-item>
		</van-collapse>
	</van-row>
</template>
<script setup lang="ts">
import { IEvent, IParam } from '@/core';
import { AppIcon } from '@components/common/icon';
import { Ref } from 'vue';
import { formGroupProps } from '../form';
const props = defineProps(formGroupProps);

interface ComponentEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<ComponentEmit>();

//  显示内容区
const showContent: Ref<string[]> = ref(
	props.titleBarCloseMode === 2 ? [] : ['open']
);

const handleGroupAction = (event: MouseEvent, action: IParam) => {
	emit('component-action', {
		name: props.name,
		action: 'formGroupAction',
		data: {
			event,
			logic: {
				name: props.name,
				actionTag: action.uIActionTag,
				actionDECodeName: action.actionDECodeName,
				predefinedType: action.predefinedType,
			},
		},
	});
};
</script>
